<template>
  <div id="DeviceTree" style="width: 100%;height: 100%; background-color: #FFFFFF; overflow: auto">
    <el-container>
      <el-header>设备列表</el-header>
      <el-main style="background-color: #ffffff;">
        <div class="device-tree-main-box">
          <el-tree
            ref="gdTree"
            :props="defaultProps"
            :load="loadNode"
            lazy
            @node-click="handleNodeClick"
            @node-contextmenu="handleContextMenu"
            node-key="id"
            style="min-width: 100%; display:inline-block !important;"
          >
            <template #default="{ node, data }" class="custom-tree-node" style="width: 100%">
              <span
                v-if="node.type === 0 && node.online"
                title="在线设备"
                class="device-online iconfont icon-jiedianleizhukongzhongxin2"
              ></span>
              <span
                v-if="node.type === 0 && !node.online "
                title="离线设备"
                class="device-offline iconfont icon-jiedianleizhukongzhongxin2"
              ></span>
              <span v-if="node.type === 2 && node.online" class="device-online iconfont icon-jiedianleilianjipingtai"
                    title="目录"></span>
              <span v-if="node.type === 2 && !node.online" class="device-offline iconfont icon-jiedianleilianjipingtai"
                    title="目录"></span>
              <span
                v-if="node.type === 3 && node.online "
                title="在线通道"
                class="device-online iconfont icon-shebeileijiankongdian"
              ></span>
              <span
                v-if="node.type === 3 && !node.online"
                title="在线通道"
                class="device-offline iconfont icon-shebeileijiankongdian"
              ></span>
              <span v-if="node.type === 4 && node.online " class="device-online iconfont icon-shebeileiqiuji"
                    title="在线通道-球机"></span>
              <span v-if="node.type === 4 && !node.online" class="device-offline iconfont icon-shebeileiqiuji"
                    title="在线通道-球机"></span>
              <span v-if="node.type === 5 && node.online " class="device-online iconfont icon-shebeileibanqiu"
                    title="在线通道-半球"></span>
              <span
                v-if="node.type === 5 && !node.online"
                title="在线通道-半球"
                class="device-offline iconfont icon-shebeileibanqiu"
              ></span>
              <span
                v-if="node.type === 6 && node.online "
                title="在线通道-枪机"
                class="device-online iconfont icon-shebeileiqiangjitongdao"
              ></span>
              <span
                v-if="node.type === 6 && !node.online"
                title="在线通道-枪机"
                class="device-offline iconfont icon-shebeileiqiangjitongdao"
              ></span>
              <span v-if="node.online" class="device-online" style="padding-left: 1px">{{ node.label }}</span>
              <span v-if="!node.online" class="device-offline" style="padding-left: 1px">{{ node.label }}</span>
              <span>
                <i v-if="node.hasGPS && node.online" class="device-online iconfont icon-dizhi"
                   style="color: #9d9d9d"></i>
                <i v-if="node.hasGPS && !node.online" class="device-offline iconfont icon-dizhi"
                   style="color: #9d9d9d"></i>
              </span>
            </template>
          </el-tree>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { getAllDeviceList, getTree } from "@/api/video_monitor/DeviceService";

export default {
  name: "DeviceTree",
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "name",
        isLeaf: "isLeaf"
      }
    };
  },
  props: ["device", "onlyCatalog", "clickEvent", "contextMenuEvent"],
  methods: {
    handleNodeClick(data, node, element) {
      console.log("data", data);
      if (typeof (this.clickEvent) == "function") {
        this.clickEvent(data.userData, data.userData, data.type === 2);
      }
    },
    handleContextMenu(event, data, node, element) {
      if (typeof (this.contextMenuEvent) == "function") {
        this.contextMenuEvent(data.userData, event, data.userData, data.type === 2);
      }
    },
    loadNode: async function(node, resolve, reject) {
      if (node.level === 0) {
        if (this.device) {
          let node = {
            name: this.device.name || this.device.deviceId,
            isLeaf: false,
            id: this.device.deviceId,
            type: this.device.online,
            online: this.device.online === 1,
            userData: this.device
          };
          resolve([node]);
        } else {
          let data = await getAllDeviceList();
          if (data.length > 0) {
            let nodeList = [];
            for (let i = 0; i < data.length; i++) {
              let node = {
                name: data[i].name || data[i].deviceId,
                isLeaf: false,
                id: data[i].deviceId,
                type: data[i].onLine,
                online: data[i].online === 1,
                userData: data[i]
              };
              nodeList.push(node);
            }
            resolve(nodeList);
          } else {
            resolve([]);
          }
        }
      } else {
        let channelArray = [];
        const catalogData = await getTree(node.data.userData.deviceId, node.data.id, this.onlyCatalog);
        channelArray = channelArray.concat(catalogData);
        this.channelDataHandler(channelArray, resolve);
      }
    },
    channelDataHandler: function(data, resolve) {
      if (data.length > 0) {
        let nodeList = [];
        for (let i = 0; i < data.length; i++) {
          let item = data[i];
          let type = 3;
          if (item.id.length <= 10) {
            type = 2;
          } else {
            if (item.id.length > 14) {
              let channelType = item.id.substring(10, 13);
              if (channelType === "215" || channelType === "216") {
                type = 2;
              }
              if (item.basicData.ptzType === 1) { // 1-球机;2-半球;3-固定枪机;4-遥控枪机
                type = 4;
              } else if (item.basicData.ptzType === 2) {
                type = 5;
              } else if (item.basicData.ptzType === 3 || item.basicData.ptzType === 4) {
                type = 6;
              }
            } else {
              if (item.basicData.subCount > 0 || item.basicData.parental === 1) {
                type = 2;
              }
            }
          }
          let node = {
            name: item.name || item.basicData.channelId,
            isLeaf: type !== 2,
            id: item.id,
            deviceId: item.deviceId,
            type: type,
            online: item.basicData.status === 1,
            hasGPS: item.basicData.longitude * item.basicData.latitude !== 0,
            userData: item.basicData
          };
          nodeList.push(node);
        }
        resolve(nodeList);
      } else {
        resolve([]);
      }
    },
    reset: function() {
      this.$forceUpdate();
    }
  },
  unmounted() {
    // if (this.jessibuca) {
    //   this.jessibuca.destroy();
    // }
    // this.playing = false;
    // this.loaded = false;
    // this.performance = "";
  }
};
</script>

<style>
.device-tree-main-box {
  text-align: left;
}

.device-online {
  color: #252525;
}

.device-offline {
  color: #727272;
}
</style>
